<template>
	<view class="order">
		<!-- tab栏 -->
		<view class="tab_box flex-r-a-c">
			<view class="tab_item" :class="item.tabIndex == tabCurrent ? 'active' : ''" v-for="(item,index) in tabList"
				:key="index" :data-tabCurrent="item.tabIndex" @tap="tabChange">
				{{item.name}}
			</view>
		</view>

		<!-- 订单列表 -->
		<view class="order_box">

			<view class="list" v-for="(item,index) in orderList" :key="index" :data-id="item.id"
				@tap.stop="goOrderDetails">
				<!-- 头部 -->
				<view class="list_t flex-r-b-c">
					<view class="storeName">{{item.cname}}</view>
					<view class="state" v-if="item.status == 1 && orderType == 1">待确定</view>
					<view class="state" v-if="item.status == 1 && orderType == 2">待付款</view>
					<view class="state" v-else-if="item.status == 2 && orderType == 1 && item.arrive_time == 0">待服务
					</view>
					<view class="state" v-else-if="item.status == 2 && orderType == 1 && item.arrive_time != 0">服务中
					</view>
					<view class="state" v-else-if="item.status == 2 && orderType == 2">待收货</view>
					<view class="state" v-else-if="item.status == 4 && orderType == 2">待发货</view>
					<view class="state" v-else-if="item.status == 3">待评价</view>
					<view class="state" v-else-if="item.status == 4 && orderType == 1">已完成</view>
					<view class="state"
						v-else-if="item.status == 3 && item.after_sale == 0 && orderType == 2 || item.status == 8 && item.after_sale == 0 && orderType == 2">
						已完成</view>
					<view class="state" v-else-if="item.status == 98 && orderType == 2">等待退款</view>
					<view class="state" v-else-if="item.status == 99 && orderType == 2">退款成功</view>
					<view class="state" v-else-if="item.status == 5  && orderType == 1">已取消</view>
					<view class="state" v-else-if="item.status == 6 && orderType == 2">已取消</view>
				</view>
				<!-- 服务信息/商品信息 -->
				<view class="list_c">
					<view class="list_c_t flex-r-a-c" v-for="(items,index) in item.data" :key="index">
						<image :src="items.image" mode="widthFix"></image>
						<view class="list_c_t_f">
							<view class="name" v-if="orderType == 1">{{items.sname}}</view>
							<view class="name" v-else>{{items.pname}}</view>
							<view class="price_box flex-r-b-c">
								<view class="quantity" v-if="orderType == 1">共{{items.num}}件</view>
								<view class="quantity" v-else>共{{items.num}}件</view>
							</view>
						</view>
						<!-- <view class="list_c_t_b flex-r-b-c" v-if="orderType == 2">  
							<view class="quantity">共{{item.num}}件</view>
							<view class="price_text">应付 <view class="price">¥<text>{{item.price}}</text></view></view>
						</view> -->
					</view>

					<!-- 技师信息 -->
					<view class="list_c_b flex-r-b-c" v-if="orderType == 1">
						<view class="list_c_b_l flex-r-s-c">
							<image src="../../static/mine/js.png" mode=""></image>
							<view class="text">{{item.tname}}</view>
						</view>
						<view class="list_c_b_f">{{item.otime}}</view>
					</view>

				</view>
				<!-- 订单按钮 -->
				<view class="list_b" v-if="item.status == 1">
					<view class="cancel" @tap.stop="isCancelPop = true; currentId = item.id"
						v-if="item.arrive_time == 0">取消订单</view>
					<view class="cancel" @tap.stop="isCancelPop = true; currentId = item.id" v-if="orderType == 2">取消订单
					</view>
					<view class="payment" v-if="orderType == 1"
						@tap.stop="goOrderConfirm(item.tid,item.sid,item.otime,item.tname,item.id)">去确认</view>
					<view class="payment" v-else @tap.stop="goConfirm(item)">去付款</view>
				</view>
				<view class="list_b" v-else-if="item.status == 2 && orderType == 1">
					<view class="cancel" @tap.stop="isCancelPop = true; currentId = item.id"
						v-if="item.arrive_time == 0">取消订单</view>
					<view class="payment" @tap.stop="goTabOrder(item.id,item.sid,item.tid)">再来一单</view>
				</view>
				<view class="list_b" v-else-if="item.status == 2 && orderType == 2">
					<view class="cancel" @tap.stop="goTabOrder(item.id,item.sid,item.tid)">再来一单</view>
					<view class="cancel" v-if="item.self_code == 0" @tap.stop="goLogistics(item.orderid)">查看物流</view>
					<view class="payment" v-if="item.self_code == 0" @tap.stop="confirmOrder(item.orderid)">确认收货</view>
					<view class="payment" v-if="item.self_code != 0" :data-selfcode="item.self_code"
						@tap.stop="selfMention">自提码</view>
				</view>
				<view class="list_b" v-else-if="item.status == 3">
					<view class="cancel" @tap.stop="goTabOrder(item.id,item.sid,item.tid)">再来一单</view>
					<view class="cancel" v-if="orderType == 2" @tap.stop="goLogistics(item.orderid)">查看物流</view>
					<view class="payment" v-if="item.status == 3" :data-index="index" @tap.stop="goComment">去评价</view>
				</view>
				<view class="list_b" v-else-if="item.status == 4">
					<view class="cancel" v-if="item.status == 4 && orderType == 1" @tap.stop="goDetails(item.goods_id)">
						查看评价</view>
					<view class="cancel" style="color: #FF6C1D; border: 1px solid #FF6C1D;"
						@tap.stop="goTabOrder(item.id,item.sid,item.tid)">再来一单</view>
				</view>
				<view class="list_b" v-else-if="item.status == 8 && orderType == 2">
					<view class="cancel" @tap.stop="goDetails(item.goods_id)">查看评价</view>
					<view class="cancel" style="color: #FF6C1D; border: 1px solid #FF6C1D;"
						@tap.stop="goTabOrder(item.id,item.sid,item.tid)">再来一单</view>
				</view>

				<view class="list_b" v-else-if="item.status == 2 && orderType == 1 && item.arrive_time != 0">
					<view class="cancel" style="color: #FF6C1D; border: 1px solid #FF6C1D;"
						@tap.stop="goTabOrder(item.id,item.sid,item.tid)">再来一单</view>
				</view>


			</view>

			<view class="text" style="width: 100%; text-align: center; font-size: 32rpx; font-weight: bold;">
				{{titleText}}
			</view>

		</view>


		<!-- 取消订单弹框 -->
		<u-popup v-model="isCancelPop" mode="bottom" height="300px" border-radius="30">
			<view class="popup_box">
				<view class="title" v-if="orderType == 1">取消预约订单</view>
				<view class="title" v-if="orderType == 2">取消商品订单</view>
				<view class="content" v-if="orderType == 1">预约成功后即可到店享受服务！</view>
				<view class="content" v-if="orderType == 2">购买成功后即可发货或到店自提！</view>
				<view class="content">是否取消订单？</view>
				<view class="popup_btn flex-r-a-c">
					<view class="qBtn btn" @tap.stop="cancelOrder">确定取消</view>
					<view class="zBtn btn" @tap.stop="isCancelPop = false">暂不取消</view>
				</view>
			</view>
		</u-popup>

		<!-- 自提码弹框 -->
		<u-popup v-model="isSelfMention" mode="center" width="80%" height="40%" border-radius="30" closeable>
			<view style="padding-top: 170rpx;">
				<view
					style="width: 100%; text-align: center; font-size: 40rpx; font-weight: bold; letter-spacing: 20rpx;">
					自提码</view>
				<view
					style="width: 100%; text-align: center; color: #45806E; font-size: 80rpx; font-weight: bold; letter-spacing: 20rpx;">
					{{selfMentionText}}
				</view>
			</view>
		</u-popup>

		<!-- 下拉支付方式 -->
		<u-popup class="couponPopup" v-model="istoPay" mode="bottom" border-radius="20" height="70%" closeable>
			<view class="flex-c-c-c" style="color: #4A4A4A;font-size: 32rpx;line-height: 100rpx;">选择支付方式</view>
			<!-- 微信支付 -->
			<view class="flex-r-b-c"
				style="padding: 0rpx 34rpx;height: 100rpx;border-bottom: 1rpx solid #F2F2F2;margin-top: 50rpx;">
				<view class="flex-r-b-c">
					<u-icon name="weixin-fill" color="#00BC0C" size="55"></u-icon>
					<text style="color:#4B4B4B;font-size: 28rpx;font-weight: bold;margin-left: 28rpx;">微信支付</text>
				</view>
				<u-checkbox-group style="margin-right: -30rpx;">
					<u-checkbox v-model="isVXpay" @change="isBalancePay=false" shape="circle" active-color="#52C41A"
						size="47" icon-size="30"></u-checkbox>
				</u-checkbox-group>
			</view>
			<!-- 余额支付 -->
			<view class="flex-r-b-c" style="padding: 0rpx 34rpx;height: 100rpx;border-bottom: 1rpx solid #F2F2F2;">
				<view class="flex-r-b-c">
					<image src="../../static/icon/yue.png" mode="widthFix" style="width: 45rpx;"></image>
					<text style="color:#4B4B4B;font-size: 28rpx;font-weight: bold;margin-left: 28rpx;">余额支付</text>
					<text
						style="color: #4B4B4B;font-size: 24rpx;margin-left: 24rpx;">当前余额：¥{{orderConfirm.balance}}</text>
				</view>
				<u-checkbox-group style="margin-right: -30rpx;">
					<u-checkbox v-model="isBalancePay" @change="isVXpay=false;isGoods_price=false" shape="circle"
						active-color="#52C41A" size="47" icon-size="30"></u-checkbox>
				</u-checkbox-group>
				<!-- <text style="color: #FF6C1D;font-size: 28rpx;" v-else>去充值</text> -->
			</view>
			<!-- 余额支付 -->
			<view class="flex-r-b-c" style="padding: 0rpx 34rpx;height: 100rpx;border-bottom: 1rpx solid #F2F2F2;"
				v-if="orderConfirm.idcrode>1">
				<view class="flex-r-b-c">
					<image src="../../static/icon/yue.png" mode="widthFix" style="width: 45rpx;"></image>
					<text style="color:#4B4B4B;font-size: 28rpx;font-weight: bold;margin-left: 28rpx;">货款支付</text>
					<text
						style="color: #4B4B4B;font-size: 24rpx;margin-left: 24rpx;">当前货款余额：¥{{orderConfirm.goods_price}}</text>
				</view>
				<u-checkbox-group style="margin-right: -30rpx;" v-if="orderConfirm.isgoods_price">
					<u-checkbox v-model="isGoods_price" @change="isVXpay=false;isBalancePay=false" shape="circle"
						active-color="#52C41A" size="47" icon-size="30"></u-checkbox>
				</u-checkbox-group>
				<navigator url="/distribution/settlement/settlement?type=3" style="color: #FF6C1D;font-size: 28rpx;"
					v-else hover-class="none">去充值</navigator>
			</view>
			<view class="flex-c-c-c"
				style="width:686rpx;height: 90rpx;background-color:#45806E;border-radius: 58rpx;font-size: 32rpx;color: #FFF;position: fixed;bottom:108rpx;left: 32rpx;"
				@click="fk_fn()">
				确认支付
			</view>
		</u-popup>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderType: 0, // 订单类型 1 表示 服务订单， 2 表示 商品订单
				isCancelPop: false, // 取消订单弹框
				isSelfMention: false, // 自提码弹框
				selfMentionText: '', // 自提码
				tabCurrent: 0, // tab 栏 下标
				tabList: [{ // tab 数据
					name: '全部',
					tabIndex: 0
				}, {
					name: '待付款',
					tabIndex: 1
				}, {
					name: '待服务',
					tabIndex: 2
				}, {
					name: '服务中',
					tabIndex: 4
				}, {
					name: '待评价',
					tabIndex: 3
				}, {
					name: '退款/售后',
					tabIndex: 99
				}],
				orderList: [], // 订单列表
				page: 1, // 页数
				titleText: '', // 上拉提示
				isClick: true,
				currentId: null,
				istoPay: false, //时候弹出下拉支付弹框
				isVXpay: true, //默认微信支付
				id: '', // 当前订单id
				isBalancePay: false,
				isGoods_price: false,
				orderConfirm: {}
			};
		},
		onLoad(options) {
			// type = 1  表示服务订单列表， type = 2  表示商品订单列表
			options.type == 1 ? this.orderType = 1 : this.orderType = 2
			if (this.orderType == 1) {
				uni.setNavigationBarTitle({
					title: '我的预约'
				})
				this.tabList[1].name = '待确认'
				this.tabList.splice(5, 1)
			} else {
				this.tabList[2].name = '待收货'
				this.tabList.splice(3, 1)
			}
		},
		onShow() {
			this.page = 1
			this.orderList = []
			this.orderType == 1 ? this.getServiceOrderList() : this.getShopOrderList()
			// this.getDefaultAddress()

		},
		onReachBottom() {
			let that = this
			if (that.titleText == '') { // 防止上拉多次请求
				that.page = that.page + 1
				if (that.orderType == 1) {
					that.getServiceOrderList()
				} else {
					that.getShopOrderList()
				}
			}
		},
		methods: {
			// tab 切换
			tabChange(e) {
				this.page = 1
				this.orderList = []
				this.tabCurrent = e.currentTarget.dataset.tabcurrent
				if (this.orderType == 1) {
					this.getServiceOrderList()
				} else {
					this.getShopOrderList()
				}
				this.isClick = false
			},
			// 获取预约服务订单列表
			getServiceOrderList() {
				let that = this
				if (!that.isClick) {
					return
				}
				let data = {
					status: that.tabCurrent,
					page: that.page
				}
				that.$api.myAppointment_list(data).then(res => {
					console.log(res)
					that.isClick = true
					that.titleText = res.data.data.data.length == 0 ? '暂无数据' : ''
					that.orderList = that.orderList.concat(res.data.data.data)
				})
			},
			// 获取商品订单列表
			getShopOrderList() {
				let that = this
				if (!that.isClick) {
					return
				}
				let after_sale = 0
				// that.tabCurrent == 4 ? 
				let data = {
					status: that.tabCurrent,
					page: that.page
				}
				that.$api.shopOrder_list(data).then(res => {
					console.log(res)
					that.isClick = true
					that.titleText = res.data.data.data.length == 0 ? '暂无数据' : ''
					that.orderList = that.orderList.concat(res.data.data.data)
				})
			},
			// 点击自提码
			selfMention(e) {
				this.selfMentionText = e.currentTarget.dataset.selfcode
				this.isSelfMention = true
			},
			// 点击跳转订单详情
			goOrderDetails(e) {
				let id = e.currentTarget.dataset.id
				uni.navigateTo({
					url: '/order/orderDetails/orderDetails?id=' + id + '&type=' + this.orderType
				})
			},
			// 点击再来一单
			goTabOrder(id, sid, tid) {
				let that = this
				if (that.orderType == 1) {
					// this.$emits('tabOrder', {
					// 	fwId: sid,
					// 	jsId: tid
					// })
					// uni.switchTab({
					// 	url: '/pages/tabBar/order/order'
					// })
					uni.navigateTo({
						url: '/pages/tabBar/serviceReservation/serviceReservation'
					})
				} else if (that.orderType == 2) {
					// let data = []
					// that.orderList.forEach(e => {
					// 	if(e.id == id){
					// 		e.data.forEach(i => {
					// 			data.push({ id: i.id, num: i.num })
					// 		})
					// 	}
					// })
					// uni.navigateTo({
					// 	url: '/order/orderConfirm/orderConfirm?goods=' + encodeURIComponent(JSON.stringify(data))
					// })
					var data = []
					that.orderList.map(e => {
						if (e.id == id) {
							e.data.forEach(i => {
								console.log(i)
								if (i.activity_id > 0) {
									// uni.navigateTo({
									// 	url: '/order/orderConfirm/orderConfirm?goods=' + encodeURIComponent(JSON.stringify({activity_id:i.activity_id,activity_num:i.num}))
									// })
									data.push({
										activity_id: i.activity_id,
										activity_num: i.num
									})
								} else {
									// uni.navigateTo({
									// 	url: '/order/orderConfirm/orderConfirm?goods=' + encodeURIComponent(JSON.stringify([{id:i.id,num:i.num}]))
									// })
									data.push({
										id: i.id,
										num: i.num
									})
								}
							})
						}
					})
					console.log(data)
					uni.navigateTo({
						url: '/order/orderConfirm/orderConfirm?goods=' + encodeURIComponent(JSON.stringify(data))
					})
				}
			},
			// 跳转评价
			goComment(e) {
				let i = e.currentTarget.dataset.index
				let data = {}
				if (this.orderType == 1) {
					data = {
						type: 2, // 服务
						image: this.orderList[i].image,
						id: this.orderList[i].id,
						jsName: this.orderList[i].tname,
						name: this.orderList[i].sname
					}
				} else if (this.orderType == 2) {
					data = {
						type: 3, // 商品
						image: this.orderList[i].image,
						id: this.orderList[i].id,
						name: this.orderList[i].pname,
						orderid: this.orderList[i].orderid,
						cname: this.orderList[i].cname
					}

				}
				uni.navigateTo({
					url: '/order/comment/comment?data=' + JSON.stringify(data)
				})
			},
			// 查看物流
			goLogistics(orderid) {
				uni.navigateTo({
					url: '/order/logistics/logistics?id=' + orderid
				})
			},
			// 点击去确认
			goOrderConfirm(jid, fid, time, jname, orderId) {
				jname = jname.substr(jname.lastIndexOf("：") + 1);
				uni.navigateTo({
					url: '/order/reservationOrder/reservationOrder?app_id=' + orderId + '&date=' + time + '&id=' +
						jid + '&id_name=' + jname
				})
			},
			// 点击去付款
			goConfirm(item) {
				let that = this
				that.$api.User_getUser({
					'name': 'idcrode'
				}).then(res => {
					that.$api.Order_mybalance().then(res1 => {
						that.istoPay = true
						that.id = item.id
						that.orderConfirm = {
							balance: res1.data.data.balance,
							goods_price: res1.data.data.goods_price,
							idcrode: res.data.data,
							isgoods_price: Number(res1.data.data.goods_price) > Number(item.price)
						}
					})
				})

			},
			// 微信支付
			fk_fn() {
				let that = this,
					type = that.isVXpay ? 1 : that.isBalancePay ? 3 : that.isGoods_price ? 4 : null
				that.$api.order_pay({
					id: that.id,
					type: type
				}).then(res => {
					console.log(res)
					if (type == 1) {
						uni.requestPayment({
							provider: 'wxpay',
							...res.data.data.prePay,
							success(res) {
								// that.bindingRelationship()
								uni.redirectTo({
									url: '/order/ordersTrue/ordersTrue?type=2'
								})
								console.log('success:' + JSON.stringify(res));
							},
							fail: function(err) {
								console.log('fail:' + JSON.stringify(err));
							}
						})
					} else {
							// that.bindingRelationship()
							uni.redirectTo({
								url: '/order/ordersTrue/ordersTrue?type=2'
							})
						} 
				})
			},
			// 绑定上下级关系
			// bindingRelationship(){
			// 	let that = this
			// 	console.log(1234,'开始绑定')
			// 	console.log(uni.getStorageSync('scene_id'))
			// 	if(uni.getStorageSync('scene_id')){
			// 		that.$api.User_savePid({ id: uni.getStorageSync('scene_id') }).then(res => {
			// 			console.log('绑定成功',res)
			// 		})
			// 	}
			// },
			// 点击取消订单
			cancelOrder() {
				this.orderType == 1 ? this.serviceCancel() : this.commodityCancel()
			},
			// 服务订单取消
			serviceCancel() {
				console.log(1)
				let that = this
				that.$api.service_cancel({
					app_id: that.currentId
				}).then(res => {
					console.log(res)
					uni.showToast({
						title: '预约取消成功',
						icon: 'none'
					})
					that.isCancelPop = false
					that.orderList = []
					that.page = 1
					that.getServiceOrderList()
				})
			},
			// 商品订单取消
			commodityCancel() {
				console.log(2)
				let that = this
				that.$api.commodity_cancel({
					id: that.currentId
				}).then(res => {
					console.log(res)
					uni.showToast({
						title: '订单取消成功',
						icon: 'none'
					})
					that.isCancelPop = false
					that.orderList = []
					that.page = 1
					that.getShopOrderList()
				})
			},
			// 去评论
			goDetails(id) {
				uni.navigateTo({
					url: '/order/activityDetails/activityDetails?id=' + id + '&isComment=true'
				})
			},
			// 确认订单
			confirmOrder(orderid) {
				console.log(orderid)
				let that = this
				that.$api.confirmOrder({
					orderid: orderid
				}).then(res => {
					console.log(res)
					uni.showToast({
						title: '确认收货成功',
						icon: 'none'
					})
					setTimeout(e => {
						that.page = 1
						that.orderList = []
						that.getShopOrderList()
					}, 1000)
				})
			}
		}
	}
</script>

<style lang="less">
	.order {

		.tab_box {
			width: 100vw;
			height: 102rpx;
			background-color: #FFFFFF;

			.tab_item {
				font-size: 28rpx;
				position: relative;
				color: #7B7B7B;
			}

			.active {
				color: #333333;
				font-size: 32rpx;

				&::after {
					width: 100rpx;
					height: 10rpx;
					content: ' ';
					background-color: #557E6F;
					border-radius: 4rpx;
					position: absolute;
					top: 64rpx;
					left: 50%;
					transform: translateX(-50%);
				}
			}
		}

		// 
		.order_box {
			width: 90vw;
			margin: 40rpx auto;
			padding-bottom: 100rpx;

			.list {
				width: 100%;
				height: auto;
				border-radius: 20rpx;
				background-color: #FFFFFF;
				margin-bottom: 40rpx;

				.list_t {
					height: 76rpx;
					border-bottom: 1px solid #F2F2F2;

					.storeName {
						font-size: 28rpx;
						font-weight: bold;
						color: #4B4B4B;
						margin-left: 30rpx;
					}

					.state {
						font-size: 24rpx;
						color: #FF6C1D;
						font-weight: 500;
						margin-right: 30rpx;
					}
				}

				// 
				.list_c {
					width: 100%;
					height: auto;
					border-bottom: 1px solid #F2F2F2;
					margin-top: 20rpx;

					.list_c_t {
						box-sizing: border-box;
						padding-bottom: 30rpx;
						flex-wrap: wrap;

						image {
							width: 236rpx;
							height: 194rpx;
							border-radius: 30rpx;
						}

						.list_c_t_b {
							width: 100%;
							justify-content: flex-end !important;

							.quantity {
								font-size: 28rpx;
								color: #959595;
								font-weight: 500;
								margin-right: 120rpx;
							}

							.price_text {
								font-size: 28rpx;
								color: #484848;
								font-weight: 500;
								margin-right: 20rpx;

								.price {
									display: inline-block;
									margin-left: 10rpx;
									font-size: 34rpx;
									color: #FF6C1D;

									text {
										display: inline-block;
										font-size: 42rpx;
									}
								}
							}
						}

						.list_c_t_f {
							width: 60%;
							line-height: 100rpx;

							.name {
								color: #3B3B3B;
								font-size: 32rpx;
								font-weight: bold;
							}

							.price_box {
								.quantity {
									font-size: 28rpx;
									color: #959595;
									font-weight: 500;
								}

								.price_text {
									font-size: 28rpx;
									color: #484848;
									font-weight: 500;
									margin-right: 20rpx;

									.price {
										display: inline-block;
										margin-left: 10rpx;
										font-size: 34rpx;
										color: #FF6C1D;

										text {
											display: inline-block;
											font-size: 42rpx;
										}
									}
								}
							}
						}
					}

					.list_c_b {
						width: 100%;
						box-sizing: border-box;
						padding-bottom: 20rpx;

						.list_c_b_l {
							height: 100%;
							margin-left: 30rpx;

							image {
								width: 34rpx;
								height: 34rpx;
							}

							.text {
								margin-left: 10rpx;
								color: #464646;
								font-size: 24rpx;
								font-weight: 500;
							}
						}

						.list_c_b_f {
							height: 100%;
							color: #9F9F9F;
							font-size: 24rpx;
							font-weight: 400;
							margin-right: 30rpx;
						}
					}

					//
				}

				// 
				.list_b {
					width: 100%;
					height: 85rpx;
					display: flex;
					align-items: center;
					justify-content: flex-end;

					.cancel {
						width: 146rpx;
						height: 56rpx;
						line-height: 56rpx;
						text-align: center;
						border: 1px solid #D0D0D0;
						border-radius: 30rpx;
						font-size: 24rpx;
						font-weight: 500;
						color: #959595;
						margin-right: 30rpx;
					}

					.payment {
						width: 146rpx;
						height: 56rpx;
						line-height: 56rpx;
						text-align: center;
						border-radius: 30rpx;
						background-color: #FF6C1D;
						color: #FFFFFF;
						font-size: 24rpx;
						font-weight: 500;
						margin-right: 30rpx;
					}
				}
			}
		}

		//

		.popup_box {
			text-align: center;

			.title {
				margin-top: 40rpx;
				font-size: 32rpx;
				color: #4A4A4A;
				font-weight: bold;
			}

			.content {
				margin-top: 80rpx;
				color: #8B8B8B;
				font-size: 24rpx;
				font-weight: 500;

				&:nth-child(3) {
					margin-top: 0;
				}
			}

			.popup_btn {
				margin-top: 140rpx;

				.btn {
					width: 260rpx;
					height: 80rpx;
					line-height: 80rpx;
					text-align: center;
					border-radius: 80rpx;
					color: #FFFFFF;
					font-size: 32rpx;
					font-weight: 500;
				}

				.qBtn {
					background: #CCCCCC;
				}

				.zBtn {
					background: #45806E;
				}
			}
		}
	}
</style>
